<template>
  <div class="container-box">
    <div class="form-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="right"
        label-width="80px"
        class="demo-ruleForm"
      >
        <h3 class="title">{{ userType }}密碼變更</h3>
        <el-form-item prop="account" label="帳號">
          <el-input type="text" v-model="ruleForm.account" placeholder="請輸入登入帳號" readonly clearable></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密碼">
          <el-input type="password" v-model="ruleForm.newPassword" placeholder="請輸入登入密碼" clearable></el-input>
        </el-form-item>
        <el-form-item prop="reNewPassword" label="確認密碼">
          <el-input type="password" v-model="ruleForm.reNewPassword" placeholder="請輸入確認密碼" clearable></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="updatePwd" :loading="loading">變更</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'changePwd',

  data() {
    return {
      ruleForm: {
        account: '',
        newPassword: '',
        reNewPassword: '',
      },
      rules: {
        newPassword: [{
          required: true,
          message: '請輸入密碼',
          trigger: 'blur'
        }],
        reNewPassword: [{
          required: true,
          message: '請確認密碼',
          trigger: 'blur'
        }]
      },
      loading: false
    }
  },

  computed: {
    ...mapState({
      userType: (state) => state.common.userType
    }),
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.account = user.account || ''
    }
  },

  methods: {
    updatePwd() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          if(this.ruleForm.newPassword !== this.ruleForm.reNewPassword) {
            this.loading = false
            this.$message.error('兩次輸入的密碼不一致！')
            return false
          }
          const params = {
            account: this.ruleForm.account,
            password: this.ruleForm.newPassword
          }
          this.$store.dispatch('common/fetchUpdatePwd', params).then(res => {
            // console.log('变更密码打印')
            // console.log(res)
            this.loading = false
            this.$message.success(res.message)
            this.ruleForm = {
              newPassword: '',
              reNewPassword: '',
            }
            sessionStorage.removeItem('user')
            sessionStorage.removeItem('tabData')

            this.$router.push({
              name: 'Login'
            })
            return
          }).catch(err => {
            console.error(err)
            this.loading = false
            this.$message.error(err)
            return false
          })
        } else {
          this.$message.error('密碼變更提交時出現意外錯誤！')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    // border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
}
</style>
